<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "~@/assets/stylus/variable.styl"
.footer-main
	background #161a1d
	color #fff
.footer-container
	display flex
	padding 80px 0 60px
	.footer-part-main
		width 50%
		.label
			display flex
			align-items: center;
			margin-bottom 20px
			svg
				display block
				width 80px
				margin-right 20px
				fill #505c62
			h3
				margin 0
				font-size 26px
				color #5c6870
		p
			margin 0
			padding-right 40px
			font-size 16px
			color #474e52
	.footer-part-side
		width 25%
		h3
			margin 0 0 20px
			font-size 18px
			color #5c6870
	.link-list
		list-style none
		margin 0
		padding 0
		li
			list-style none
			margin 0
			padding 0
		a
			display inline-block
			margin-bottom 15px
			color #5c6870
			transition .15s ease-in-out
			small
				padding-left 5px
				opacity .7
			&:hover
				color #9da9af
		.primary
			a
				height 32px
				padding 0 12px
				line-height 32px
				border 1px solid currentColor
				border-radius 16px
	.footer-sns-link
		display flex
		justify-content space-between
		padding 40px 0 0
		a
			display block
			width 60px
			height 60px
			transition .15s ease-in-out
			svg
				display block
				height 40px
				margin auto
				fill #505c62
			span
				display block
				text-align center
				color #474e52
			&:hover
				background #fff
.footer-sub
	padding 40px 0 20px
	border-top 1px solid #0d1012
	background #121517
	text-align center
	color #5c6870
	.beian
		padding 10px 0 20px
		a
			font-size 14px
			color #292f32
			transition .15s
			&:hover
				text-decoration underline
				color #9da9af
.footer-version
	padding 10px 20px 18px
	border-top 1px solid #070808
	background #090a0b
	text-align center
	button
		margin-right 20px
		color #2e3438
		&:hover
			color #8f9ba3
		&[disabled]
			color #576975
	span
		display inline-block
		vertical-align text-bottom
		height 1em
		margin-left 20px
		line-height 1em
		font-size 12px
		color #2e3438
@media screen and (max-width $pad-portrait-width)
	.footer-container
		flex-wrap wrap
		.footer-part-main
			width 100%
			margin-bottom 40px
			p
				padding-right 0
		.footer-part-side
			width 50%
@media screen and (max-width $max-mobile-width)
	.footer-container
		display block
		padding-top 30px
		.footer-part-main,
		.footer-part-side
			width auto
			padding 0 5px
		.footer-part-main
			.label
				svg
					width 60px
				h3
					font-size 20px
			p
				font-size 14px
</style>
<template>
<div class="app-footer">
	<div class="footer-main">
		<Container class="footer-container">
			<div class="footer-part-main">
				<div class="label">
					<svg viewBox="150 50 1700 1700" xmlns="http://www.w3.org/2000/svg">
						<path d="m1636.55 1484.58a211.6 211.6 0 0 1 -250.18 54.76 801.031 801.031 0 0 0 -775.466 1.51 211.855 211.855 0 0 1 -247.233-55.97 796.437 796.437 0 0 1 -163.671-484.88c0-441.828 358.172-800 800-800s800 358.172 800 800a796.409 796.409 0 0 1 -163.45 484.58zm-636.55-884.58c-220.914 0-400 179.086-400 400s179.086 400 400 400 400-179.09 400-400-179.09-400-400-400z"/>
					</svg>
					<h3>小剧客栈</h3>
				</div>
				<p>小剧客栈是剧中人在成长路上的一个缩影，分享小剧在前端、nodeJS、设计、摄影等各类有趣的心得体会。也希望借此结交更多前辈好友，愿与你相互分享，一起进步！</p>
			</div>
			<div class="footer-part-side">
				<h3>相关链接</h3>
				<ul class="link-list">
					<li><a href="https://github.com/bh-lay/blog" target="_blank">博客源码<small>Github</small></a></li>
					<li><a href="/directories" target="_blank">剧中人的朋友圈</a></li>
					<li class="primary"><a href="https://e.bh-lay.com/" target="_blank">小剧起始页<small>前端工作小帮手</small></a></li>
				</ul>
			</div>
			<div class="footer-part-side">
				<h3>关于</h3>
				<div>
						<Button href="http://t.bh-lay.com/aboutme/" type="primary" style="margin-right: 15px">关于剧中人</Button>
						<Button href="/topic/aboutblog/index.html">关于小剧客栈</Button>
				</div>
				<div class="footer-sns-link">
					<a href="https://github.com/bh-lay">
						<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
							<path d="M787.696941 669.515294c0 44.935529-23.431529 118.181647-78.787765 118.181647-55.416471 0-78.848-73.246118-78.848-118.181647 0-44.875294 23.431529-118.181647 78.848-118.181647 55.356235 0 78.787765 73.306353 78.787765 118.181647zM315.090824 551.333647c-55.356235 0-78.787765 73.306353-78.787765 118.181647 0 44.935529 23.431529 118.181647 78.787765 118.181647s78.787765-73.246118 78.787764-118.181647c0-44.875294-23.431529-118.181647-78.787764-118.181647zM1024 561.212235c0 68.367059-6.746353 140.950588-37.526588 203.715765-81.257412 164.321882-304.609882 180.284235-464.594824 180.284235-162.454588 0-399.36-14.095059-483.689412-180.284235C6.746353 702.765176 0 629.579294 0 561.212235c0-89.871059 24.636235-174.742588 83.727059-243.651764a338.160941 338.160941 0 0 1-16.624941-104.688942c0-46.140235 10.420706-92.220235 31.382588-134.144 97.219765 0 159.382588 42.465882 233.231059 100.291765a823.536941 823.536941 0 0 1 190.162823-21.504c57.825882 0 116.314353 6.204235 172.333177 19.696941 73.246118-57.223529 135.348706-98.484706 231.363764-98.484706 20.961882 41.863529 31.382588 88.003765 31.382589 134.144 0 35.117176-5.541647 70.174118-16.624942 103.424C999.424 385.807059 1024 471.341176 1024 561.212235z m-137.878588 108.303059c0-94.147765-57.163294-177.212235-157.515294-177.212235-40.598588 0-79.329882 7.408941-119.988706 12.950588-31.984941 4.939294-63.969882 6.746353-96.617412 6.746353s-64.632471-1.807059-96.617412-6.746353c-39.996235-5.541647-79.390118-12.950588-119.988706-12.950588-100.291765 0-157.515294 83.064471-157.515294 177.212235 0 188.295529 172.272941 217.208471 322.43953 217.208471h103.424c150.166588 0.060235 322.379294-28.912941 322.379294-217.208471z"></path>
						</svg>
						<span>Github</span>
					</a>
					<a href="https://720yun.com/u/19023widcyv">
						<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
							<path d="M513.509376 691.195904C544.41984 690.853888 574.468096 689.575936 603.686912 687.702016L594.900992 716.8 685.391872 666.796032 586.078208 636.991488 599.914496 661.608448C573.980672 663.023616 547.373056 664.031232 520.022016 664.338432 278.726656 667.076608 82.591744 624.328704 81.93024 568.864768 81.608704 541.534208 128.886784 516.220928 205.723648 497.240064 201.795584 489.535488 199.698432 481.570816 199.698432 473.417728 199.698432 472.95488 199.77216 472.502272 199.780352 472.031232 102.0416 496.463872 40.511488 531.29216 40.962048 569.339904 41.807872 639.58016 253.370368 694.157312 513.509376 691.195904L513.509376 691.195904 513.509376 691.195904ZM855.093248 326.096896C877.725696 326.096896 896.0512 308.115456 896.0512 285.93152 896.0512 263.7312 877.725696 245.76 855.093248 245.76 832.47104 245.76 814.135296 263.739392 814.135296 285.93152 814.135296 308.115456 832.47104 326.096896 855.093248 326.096896L855.093248 326.096896 855.093248 326.096896ZM855.093248 259.13344C870.172672 259.13344 882.407424 271.128576 882.407424 285.92128 882.407424 300.709888 870.180864 312.702976 855.093248 312.702976 839.99744 312.702976 827.779072 300.709888 827.779072 285.92128 827.779072 271.128576 839.99744 259.13344 855.093248 259.13344L855.093248 259.13344 855.093248 259.13344ZM731.142144 649.418752C739.579904 655.691776 744.833024 663.492608 745.668608 671.987712 887.90016 648.497152 983.607296 606.06464 983.037952 558.62272 982.577152 519.419904 916.447232 485.113856 812.91264 462.944256 813.666304 466.393088 814.145536 469.876736 814.145536 473.397248 814.145536 477.771776 813.518848 482.097152 812.351488 486.342656 900.12672 503.713792 955.410432 529.534976 955.7504 558.92992 956.174336 596.795392 865.462272 630.784 731.142144 649.418752L731.142144 649.418752 731.142144 649.418752ZM731.142144 649.418752 731.142144 649.418752Z"></path>
							<path d="M361.2672 302.2848 191.694848 302.2848 191.694848 339.968 323.584 339.968C295.323648 384.129024 272.949248 425.637888 256.462848 463.910912 239.681536 502.181888 229.083136 536.332288 224.667648 566.0672L262.350848 566.0672C266.176512 535.744512 276.482048 500.709376 292.968448 460.670976 309.454848 420.927488 332.417024 377.6512 361.2672 330.842112L361.2672 302.2848 361.2672 302.2848Z"></path>
							<path d="M518.770688 411.506688C510.8224 422.4 496.103424 434.765824 474.3168 448.897024 452.825088 463.026176 437.223424 474.804224 427.2128 484.8128 417.204224 494.821376 409.843712 504.832 405.428224 515.135488 401.012736 525.733888 398.9504 538.392576 398.9504 553.1136L398.9504 566.0672 568.5248 566.0672 568.5248 528.384 434.573312 528.384C434.573312 520.435712 436.045824 513.662976 439.283712 508.069888 442.5216 502.4768 448.114688 496.5888 456.357888 490.405888 464.308224 484.222976 480.2048 473.919488 504.346624 459.788288 527.603712 445.952 544.090112 432.410624 553.803776 419.162112 563.519488 405.9136 568.5248 390.309888 568.5248 372.058112 568.5248 350.861312 560.869376 333.785088 546.1504 321.1264 531.136512 308.762624 511.410176 302.2848 487.2704 302.2848 471.9616 302.2848 459.008 305.522688 447.821824 312.000512 436.6336 318.476288 426.625024 327.897088 417.792 339.968L417.792 372.9408C427.2128 362.3424 437.516288 354.394112 448.704512 348.506112 459.597824 342.910976 470.489088 339.968 481.3824 339.968 496.6912 339.968 508.762112 343.205888 517.593088 349.3888 526.426112 355.571712 530.8416 364.107776 530.8416 374.706176 530.8416 388.544512 526.718976 400.908288 518.770688 411.506688L518.770688 411.506688Z"></path>
							<path d="M627.697664 533.684224C641.828864 555.4688 662.142976 566.0672 688.345088 566.0672 716.017664 566.0672 737.509376 554.881024 752.818176 531.9168 768.126976 509.247488 775.780352 476.274688 775.780352 432.9984 775.780352 345.856 748.402688 302.2848 694.233088 302.2848 665.380864 302.2848 643.596288 314.0608 628.5824 337.022976 613.566464 360.282112 606.208 394.432512 606.208 439.181312 606.208 480.397312 613.2736 511.8976 627.697664 533.684224L627.697664 533.684224ZM692.1728 339.968C722.788352 339.968 738.097152 372.058112 738.097152 435.941376 738.097152 497.7664 722.495488 528.384 691.288064 528.384 659.492864 528.384 643.8912 498.061312 643.8912 437.413888 643.8912 372.645888 659.787776 339.968 692.1728 339.968L692.1728 339.968Z"></path>
						</svg>
						<span>720云</span>
					</a>
					<a href="https://500px.me/bhlay">
						<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
							<path d="M270.6 688.6c-13-28.4-13.8-36.6 14.8-46.2 51.2-16 16 18.4 86.4 98.4h0.6v-187.8c2.4-100.4 88-184.4 195.4-184.4 107.8 0 195.4 87 195.4 193.6 0 126.8-121.6 226.4-257 186.6-21-8.4-4.2-63.4 17-57.2 106 0 178.8-20.2 178.8-128.8 0-122-154.2-179.2-233.8-89.2-47 52.8-35.2 84.2-35.2 315.2 101.4 62 236.6 44 320.8-40.2 49.6-49.6 77-116 77-186 0-70.4-27.6-136.4-77.6-186.6-49.6-49.6-115.6-77-186.6-77s-137.6 27.6-187 77c-0.6 0.6-32 33-42.4 47.8l-1 1.2c-6.6 9.4-12.6 18.2-40.2 12.2-13.8-3.4-28.6-11.6-28.6-23.6V40c0-10 7.8-21 21-21h482.6c16.6 0 16.6 23.2 16.6 30.2 0 7.8 0 30.2-16.6 30.2H324.6v265.8h0.6c208.4-219.6 565.6-72 565.6 217.8 0 356.2-489.6 440.6-620.2 125.6z m126.6-521.6c-1 8.4 9.2 49 29.2 41.2C676 113.2 832 289 845.2 289c9.6 0 45.6-30.6 28.6-45.6-186.4-178-469-114-476.6-76.4zM850 829.4C630 1049.2 252 951 186 621c0-24.4-60.8-14.8-57.8 6.6 48 346.8 492 513.8 763.2 242.6 13.8-15.6-25.2-56.8-41.4-40.8zM491.2 613.2c0 8 8.6 14.6 11 17 6 6 12.2 8.8 17 8.8 7.6 0 5.2 0.4 44.6-39 39.2 38.6 38.2 39 44.6 39 10.8 0 37-20.8 21.4-36.4L595.2 568l36.4-36.4c12.6-13.6-20.2-43.6-32.4-31.4L563.4 536c-37.2-37.6-36.8-39-43-39-10 0-36 23.4-24.8 34.6L532 568c-36.2 35.8-40.8 38.4-40.8 45.2z"></path>
						</svg>
						<span>500px</span>
					</a>
				</div>
			</div>
		</Container>
	</div>
	<div class="footer-sub">
		<p>Design & Code by @剧中人, Base on NodeJS</p>
		<p>感谢七牛提供近乎免费的CDN服务</p>
		<div class="beian"><a href="http://beian.miit.gov.cn" rel="nofollow">皖ICP备14001331号-1</a></div>
	</div>
	<div class="footer-version">
		<span>当前：</span>
		<Button type="text" disabled>Vue 版本</Button>
		<span>切换：</span>
		<Button type="text" @click="switchVersion ('html')">SSR 版本</Button>
		<Button type="text" @click="switchVersion ('js')">原生 JS 版本</Button>
	</div>
</div>
</template>

<script>

export default {
	name: 'app-footer',
	methods: {
		switchVersion (version) {
			document.cookie = `ui_version=${version};path=/;`
			window.location.reload()
		}
	}
}
</script>
